<!--
 * @Description: * 商品详情
 * @Date: 2021-01-02 18:54:05
 * @LastEditTime: 2021-01-27 20:11:00
 * @Author: Ji YingHao
 * @FilePath: \iview\iview\pages\info\index.vue
-->
<template>
  <div class="info">
    <div class="info_1">
      <Card class="card_" v-for="(item, i) in date.goodList" :key="i">
        <div style="text-align: center" class="desc_">
          <nuxt-link
            class="link_"
            :to="{ name: 'info', query: { id: item.id } }"
          >
            <img :src="item.image" />
          </nuxt-link>
          <h6>
            <nuxt-link
              class="link_"
              :to="{ name: 'info', query: { id: item.id } }"
            >
              {{ item.storeName }}
            </nuxt-link>
          </h6>
          <p>
            <nuxt-link
              class="link_"
              :to="{ name: 'list', query: { name: 'jiyinghao' } }"
            >
              <Badge
                class="button_title"
                status="processing"
                color="geekblue"
                :text="$route.query.name"
              />
            </nuxt-link>
          </p>
          <p><Badge status="error" color="red" text="近期102次下载" /></p>
          <p>
            <Badge status="success" color="blue" text="2020-12-12 01:20:56" />
          </p>
        </div>
      </Card>
    </div>
    <div class="info_2">
      <div class="info_2_1">
        <Carousel
          v-model="value1"
          autoplay
          :autoplay-speed="3000"
          class="carousel_l"
          loop
        >
        <!-- 

          downOnePwd  访问密码
          downOneRarPwd  压缩密码
          downOneUrl  下载地址
          levelId 会员等级
          levelName 下载需要等级

         -->
          <!-- JSON.parse(date.storeInfo.sliderImage).length -->
          <CarouselItem v-for="item in date.storeInfo.sliderImage" :key="item">
            <div class="demo-carousel">
              <img :src="item" alt="" srcset="" />
            </div>
          </CarouselItem>
        </Carousel>
        <div class="info_2_1_2">
          <Card>
            <p style="font-weight: 600">{{ date.storeInfo.storeName }}</p>
            <div class="info_2_1_2_1">
              <p>
                下载权限：
                <span style="color: #ed4014">
                  【{{ date.levelName==null?"--":ate.levelName }}】及以上可免费下载该资源
                </span>
                <nuxt-link :to="{ name: 'vip', params: { name: 'jiyinghao' } }" style="line-height: 30px">
                  <Button type="error" size="small" ghost @click="upVip">立即升级</Button>
                </nuxt-link>
                
              </p>
              <p>
                人气指数：
                <span style="color: #111"> {{ date.storeInfo.ficti }}人次 </span>
              </p>
              <p>
                最后更新：
                <span style="color: #111"> {{ date.storeInfo.addTime }} </span>
              </p>
            </div>
            <div class="info_2_1_2_2">
              <div class="btn_1">
                <Button icon="md-cloud-download" type="primary" @click="download">立即下载</Button
                >
              </div>
              <div class="desc__" v-if="vip_">
                <p>网盘提取码：kprw</p>
                <p>解压密码：@www.wusuo8.com</p>
              </div>
              <div class="desc__" v-else>
                <p>网盘提取码：****</p>
                <p>解压密码：********</p>
              </div>
              <div class="btn_3">
                <Button type="success" icon="ios-laptop" disabled ghost
                  >演示</Button
                >
                <Button type="primary" icon="ios-heart-outline" ghost v-if="date.storeInfo.userCollect" @click="collectAdd"
                  >收藏</Button
                >
                <Button type="primary" v-else @click="collectAdd"
                  >已收藏</Button
                >
              </div>
            </div>
          </Card>
        </div>
      </div>

      <p v-html="date.storeInfo.content"></p>

      <div style="padding: 30px 0 30px 0">
        <Card :bordered="true">
          <p slot="title">本站声明：</p>
          <p>
            <Badge
              status="success"
              color="blue"
              text="本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；"
            />
          </p>
          <p>
            <Badge
              status="success"
              color="blue"
              text="本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！"
            />
          </p>
          <p>
            <Badge
              status="success"
              color="blue"
              text="本文由吾索源码网整理自网络，如有侵权请联系本站删除！"
            />
          </p>
          <p>
            <Badge
              status="success"
              color="blue"
              text="如需转载请注明出处：https://www.wusuo8.com/show-21-2665.html"
            />
          </p>
        </Card>
      </div>

      <div class="up_">
        <ButtonGroup shape="circle">
          <Button type="primary">
            <Icon type="ios-arrow-back"></Icon>
            上一篇：人人商城小程序源码v3.28.5企业开源
            端修复小程序新版上传报错问题
          </Button>
          <Button type="primary">
            下一篇：独立版狮子鱼15.2.0社区团购直播小程序商城+团长功能+接龙分销+拼团秒杀
            <Icon type="ios-arrow-forward"></Icon>
          </Button>
        </ButtonGroup>
      </div>

      <Row>
        <Col span="8" v-for="(item, i) in date.goodList" :key="i">
          <Card class="card_">
            <div style="text-align: center" class="desc_">
              <nuxt-link
                class="link_"
                :to="{ name: 'info', query: { id: item.id } }"
              >
                <img :src="item.image" />
              </nuxt-link>
              <h6>
                <nuxt-link
                  class="link_"
                  :to="{ name: 'info', query: { id: item.id } }"
                >
                  {{ item.storeName }}
                </nuxt-link>
              </h6>
              <p>
                <nuxt-link
                  class="link_"
                  :to="{ name: 'list', params: { name: 'jiyinghao' } }"
                >
                  <Badge
                    class="button_title"
                    status="processing"
                    color="geekblue"
                    :text="$route.query.name"
                  />
                </nuxt-link>
              </p>
              <p><Badge status="error" color="red" text="近期102次下载" /></p>
              <p>
                <Badge
                  status="success"
                  color="blue"
                  text="2020-12-12 01:20:56"
                />
              </p>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import API from "@/api/index";
export default {
  name: "info",
  components: {},
  data() {
    return {
      img_: "https://file.iviewui.com/asd/asd-pro-3.png",
      value1: 0,
      date: {
        goodList: [],
        storeInfo: {
          sliderImage: "[]",
          userCollect: false
        },
      },
      id: 0,
      vip_: false
    };
  },
  watch:{
    $route(to,from){
      console.log(from.query.id);//从哪来
      console.log(to.query.id);//到哪去
      if( from.query.id !== to.query.id ){
        console.log('shuaxin');
        this.id = this.$route.query.id;
        this.detail();
      }
    }
},
  computed: {},
  mounted: function () {
    this.id = this.$route.query.id;
    this.detail();
  },
  methods: {

    download(){
      API.download(this.id).then((res) => {
        console.log(res);
      });
    },
    collectAdd(){
      API.collectAdd(this.id).then((res) => {
        console.log(res);
        this.$Message.success('收藏成功，可以在“个人中心”我的收藏中查看！');
      });
    },
    detail() {
      
      API.detail(this.id).then((res) => {
        this.date = res.data;
        this.date.storeInfo.sliderImage = JSON.parse(
          this.date.storeInfo.sliderImage
        );
        console.log(this.date.storeInfo.sliderImage);
      });
    },
  },
};
</script>
<style lang="scss">
.info {
  width: 100%;
  //   height: 100px;
  padding-bottom: 70px;
  padding-top: 20px;
  display: flex;
  justify-content: center;
  > div {
  }
  .info_1 {
    width: 350px;
    height: 100%;
    // background-color: blanchedalmond;
    .card_ {
      margin: 0 10px 20px 10px;
    }
    .desc_ {
      h6 {
        text-align: left;
        border-bottom: solid 1px #e0e0e0;
        padding-bottom: 10px;
        padding-top: 5px;
        margin-bottom: 10px;
        display: inline-block;
        height: 50px;
        width: 100%;
      }
      p {
        text-align: left;
      }
      img {
        width: 100%;
        height: 140px;
      }
    }
    .button_title > span {
      color: #2d8cf0 !important;
    }
    .button_title:hover span {
      cursor: pointer !important;
      color: #0a7bf4 !important;
    }
  }
  .info_2 {
    width: calc(100% - 350px);
    height: 100%;
    // background-color: aqua;
    .carousel_l {
      width: 50%;
      height: 220px;
      margin-right: 5px;
      img {
        width: 100%;
        height: 220px;
      }
    }
    .info_2_1 {
      display: flex;
      justify-content: center;
      margin-bottom: 40px;
      .info_2_1_2 {
        width: 50%;
        margin-left: 5px;
        > div {
          height: 220px;
        }
        .info_2_1_2_1 {
          background-color: #f1f1f1;
          padding: 10px;
          margin-top: 10px;
        }
        .info_2_1_2_2 {
          display: flex;
          justify-content: center;
          padding-top: 15px;
          > div {
            text-align: left;
          }
          .desc__ {
            font-size: 12px;
            line-height: 15px;
            flex: 1;
            padding-left: 10px;
          }
          .btn_1 {
            width: 100px;
          }
          .btn_3 {
            width: 157px;
          }
        }
      }
    }
    > .desc_ {
      padding: 10px 20px;
      line-height: 20px;
    }
    > img {
      width: 100%;
    }
    .card_ {
      margin: 5px 5px;

      img {
        width: 100%;
        height: 140px;
      }
      h6 {
        text-align: left;
        border-bottom: solid 1px #e0e0e0;
        padding-bottom: 10px;
        padding-top: 5px;
        margin-bottom: 10px;
        display: inline-block;
        height: 50px;
        width: 100%;
      }
      p {
        text-align: left;
      }
      img {
        width: 100%;
      }
    }
    .up_ {
      text-align: center;
      margin-bottom: 30px;
    }
  }
}
</style>